<template>
      <div class="login">
         <myheader></myheader>
  <div class="loginitem">
   
    <el-form
      label-position="top"
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password" />
      </el-form-item>
      <el-form-item>
        <router-link to="/register">还没有账号？立即注册>></router-link>
      </el-form-item>
      <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        登录
      </el-button>
    </el-form-item>
    </el-form>
  </div>
  </div>
</template>
<script lang="ts" setup>
import myheader from '@/components/MyHeader'
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { getlogin } from "@/utils/api";
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'
const {push}  =useRouter()
const {dispatch}  =useStore()
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  email: "zxk@qq.com",
  password: "123456",
});
const rules = reactive<FormRules>({
  email: [
    {
      required: true,
      message: "邮箱不能为空",
      trigger: "blur",
    },
    {
      type: "email",
      message: "请输入正确的邮箱格式",
      trigger: "blur",
    },
  ],
  password: [
    { required: true, message: "密码不能为空", trigger: "blur" },
    { min: 3, max: 10, message: "密码长度不对", trigger: "blur" },
  ],
});

//事件 
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      getlogin(ruleForm).then(res=>{
        console.log(res,'72');
        
       dispatch('token',res.data.token)
        push('/')
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>
<style lang="scss" scoped>
.loginitem {
  width: 400px;
  margin: 100px auto;
}
</style>